<style scoped>
    .mark{position: fixed;top:0;bottom:0;left:0;right:0;background-color:rgba(0,0,0,.5);z-index:8;}
    .city-box{position:fixed;top:20px;left:10px;right:10px;bottom:20px;background-color:#fff;z-index:9;}
    .title{height:40px;padding-left:10px;background-color:#f9f9f9;}
    .title a{width:40px;height:40px;}
    .select-box{position:absolute;left:0;right:0;top:41px;bottom:0;}
    .city-item{padding:0 10px;height:45px;}
    .city-item.cur{background-color:#ff6700;color:#fff;}
    .city-item.cur i{display:none;}
    .city-item i{font-size:20px;}
    .city-level{box-shadow:1px 0 3px #dfdfdf;transition:all .5s ease-in-out;overflow-y:scroll;}
</style>
<template>
    <div class="mark">
        <div class="city-box">
            <div class="title flex flex-justify-between flex-align-center border-bottom">
                <h4 class="normal">选择您所在的城市</h4>
                <a href="javascript:;" @click="close" class="flex flex-center">
                    <i class="fa fa-times red" style="font-size:18px;" aria-hidden="true"></i>
                </a>
            </div>
            <div class="select-box flex">
                <div :class="['city-level','flex-child-average',currentLevel>1?'border-right':'']" :style="{width:100/currentLevel+'%'}">
                    <a href="javascript:;" @click="next(p.id,1)" v-for="p in province" :key=(p.id) :class="[p.id==select.provinceId?'cur':'']" class="city-item flex flex-align-center flex-justify-between border-bottom">
                        <span>{{p.name}}</span>
                        <i class="fa fa-angle-right grey-9" aria-hidden="true"></i>
                    </a>
                </div>
                <div :class="['city-level','flex-child-average',currentLevel>2?'border-right':'']" v-if="currentLevel>1" :style="{width:100/currentLevel+'%'}">
                    <a href="javascript:;" @click="next(c.id,2)" v-for="c in city" :key=(c.id) :class="[c.id==select.cityId?'cur':'']" class="city-item flex flex-align-center flex-justify-between border-bottom">
                        <span>{{c.name}}</span>
                        <i class="fa fa-angle-right grey-9" aria-hidden="true"></i>
                    </a>
                </div>
                <div :class="['city-level','flex-child-average']" v-if="currentLevel>2" :style="{width:100/currentLevel+'%'}">
                    <a href="javascript:;" @click="next(c.id,3)" v-for="c in county" :key=(c.id) :class="[c.id==select.countyId?'cur':'']" class="city-item flex flex-align-center flex-justify-between border-bottom">
                        <span>{{c.name}}</span>
                        <i class="fa fa-angle-right grey-9" aria-hidden="true"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import mixins from '../mixins'
    export default {
      mixins: [mixins],
      props: {
        current: {
          type: [Number],
          default: 0
        },
        level: {
          type: [Number],
          default: 3
        }
      },
      data () {
        return {
          currentLevel: 1,
          province: [],
          city: [],
          county: [],
          select: {
            provinceId: 0,
            cityId: 0,
            countyId: 0,
            provinceName: '',
            cityName: '',
            countyName: ''
          }
        }
      },
      created () {
        const self = this
        self.request({act: 'getCity'}).then(res => {
          if (res.code === 0) {
            self.province = res.data
          }
        })
      },
      methods: {
        updateValue (value) {
          this.$emit('input', value)
        },
        close () {
          this.$emit('close')
        },
        next (id, level) {
          const self = this
          if (level === 1) {
            self.province.forEach(item => {
              if (item.id === id) {
                self.city = item.children
                self.currentLevel = 2
                self.select.provinceId = id
                self.select.provinceName = item.name
              }
            })
          }
          if (level === 2) {
            self.city.forEach(item => {
              if (item.id === id) {
                self.county = item.children
                self.currentLevel = 3
                self.select.cityId = id
                self.select.cityName = item.name
              }
            })
          }
          if (level === 3) {
            self.county.forEach(item => {
              if (item.id === id) {
                self.select.countyId = id
                self.select.countyName = item.name
                self.$emit('success', self.select)
              }
            })
          }
        }
      }
    }
</script>
